<template>
  <div class="video-list-container">
    <!-- 搜索和排序区域 -->
    <div class="video-list-header">
      <div class="sort-options">
        <span>排序：</span>
        <router-link
            :to="getSortLink('hot')"
            class="sort-option"
            :class="{ active: currentSort === 'hot' }"
        >
          最热
        </router-link>
        <router-link
            :to="getSortLink('new')"
            class="sort-option"
            :class="{ active: currentSort === 'new' }"
        >
          最新
        </router-link>
        <router-link
            :to="getSortLink('score')"
            class="sort-option"
            :class="{ active: currentSort === 'score' }"
        >
          评分
        </router-link>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="skeleton-container">
      <div v-for="i in 6" :key="i" class="skeleton-item">
        <div class="skeleton-poster"></div>
        <div class="skeleton-info">
          <div class="skeleton-title"></div>
          <div class="skeleton-meta"></div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else-if="filteredVideos.length === 0" class="empty-state">
      <el-empty description="没有找到符合条件的视频">
        <el-button type="primary" @click="resetFilters">
          重置筛选条件
        </el-button>
      </el-empty>
    </div>

    <!-- 视频网格 -->
    <div v-else class="video-grid">
      <VideoCartsAnime
          v-for="item in filteredVideos"
          :key="item.videoId"
          :videoset="item"
          @click="showVideoDetail(item)"
      />
    </div>

    <!-- 分页或加载更多 -->
    <div v-if="!loading && filteredVideos.length > 0" class="pagination-area">
      <el-pagination
          v-if="totalPages > 1"
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="totalItems"
          layout="prev, pager, next"
          @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import VideoCartsAnime from "@/components/VideoCartsAnime.vue";

const props = defineProps({
  videoList: {
    type: Array,
    default: () => []
  }
})

const route = useRoute()
const router = useRouter()

// 状态管理
const searchQuery = ref('')
const currentSort = ref(route.query.sort || 'hot')
const loading = ref(false)
const detailDialogVisible = ref(false)
const currentVideo = ref(null)
const currentPage = ref(1)
const pageSize = ref(12)
const totalItems = computed(() => props.videoList.length)
const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value))

// 获取排序链接
const getSortLink = (sortType) => {
  return {
    path: route.path,
    query: {
      ...route.query,
      sort: sortType,
      page: 1 // 重置到第一页
    }
  }
}

// 过滤后的视频列表
const filteredVideos = computed(() => {
  let videos = [...props.videoList]

  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    videos = videos.filter(video =>
        video.videoTitle.toLowerCase().includes(query)
    )
  }

  // 排序
  switch (currentSort.value) {
    case 'new':
      videos.sort((a, b) => new Date(b.releaseDate) - new Date(a.releaseDate))
      break
    case 'score':
      videos.sort((a, b) => parseFloat(b.videoScore) - parseFloat(a.videoScore))
      break
    case 'hot':
    default:
      videos.sort((a, b) => {
        const countA = parseFloat(a.videoPlayCount.replace(/[^\d.]/g, ''))
        const countB = parseFloat(b.videoPlayCount.replace(/[^\d.]/g, ''))
        return countB - countA
      })
  }

  // 分页
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return videos.slice(start, end)
})

// 应用筛选
const applyFilters = () => {
  currentPage.value = 1
  loading.value = true
  // 模拟API请求延迟
  setTimeout(() => {
    loading.value = false
  }, 300)
}

// 重置筛选
const resetFilters = () => {
  searchQuery.value = ''
  currentSort.value = 'hot'
  currentPage.value = 1
  router.push({ path: route.path })
}

// 显示视频详情
const showVideoDetail = (video) => {
  currentVideo.value = video
  detailDialogVisible.value = true
}

// 处理分页变化
const handlePageChange = (page) => {
  currentPage.value = page
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

// 监听路由变化
watch(() => route.query.sort, (newSort) => {
  if (newSort) {
    currentSort.value = newSort
  }
})
</script>

<style scoped lang="scss">
.video-list-container {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}

.video-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 20px;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: stretch;
  }
}

.search-box {
  flex: 1;
  max-width: 400px;

  @media (max-width: 768px) {
    max-width: 100%;
  }
}

.sort-options {
  display: flex;
  align-items: center;
  white-space: nowrap;

  span {
    font-size: 14px;
    color: #666;
    margin-right: 10px;
  }
}

.sort-option {
  font-size: 14px;
  color: #666;
  margin-right: 15px;
  text-decoration: none;
  transition: color 0.2s;

  &.active {
    color: #3498db;
    font-weight: bold;
  }

  &:hover {
    color: #3498db;
  }
}

/* 视频网格布局 */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;

  @media (max-width: 768px) {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
  }

  @media (max-width: 480px) {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
}

/* 骨架屏样式 */
.skeleton-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;

  .skeleton-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .skeleton-poster {
    height: 0;
    padding-bottom: 140%;
    background: #f5f5f5;
  }

  .skeleton-info {
    padding: 12px;

    .skeleton-title {
      height: 18px;
      background: #f5f5f5;
      margin-bottom: 8px;
      border-radius: 4px;
    }

    .skeleton-meta {
      height: 14px;
      background: #f5f5f5;
      border-radius: 4px;
    }
  }
}

/* 空状态 */
.empty-state {
  margin: 40px 0;
  text-align: center;
}

/* 分页区域 */
.pagination-area {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>
